<template>
  <div class="market-search-box">
    <el-autocomplete
      v-model="keyword"
      ref="marketSearchBox"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="keyword ? true : false"
      placeholder="搜索标签名称、口径、字段、专辑名称"
      @select="handleSelect"
      @keyup.enter.native="onSearch"
      popper-class="market-search-suggestion"
      clearable
    >
      <el-select v-model="classifyType" slot="prepend" placeholder="请选择" popper-class="market-search-suggestion">
        <el-option label="全部分类" value=""></el-option>
        <el-option v-for="item in typeArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
      <template slot-scope="{ item }">
        <el-row>
          <el-col :span="1">
            <icon-svg :name="Number(item.asset_type) | iconNameFormatter" class="item-icon"></icon-svg>
          </el-col>
          <el-col :span="13" class="item-ename">
            <span v-html="item.asset_nm"></span>
            <span v-if="item.asset_field_nm">
              <span class="item-split">|</span>
              <span v-html="item.asset_field_nm"></span>
            </span>
          </el-col>
          <el-col :span="10" class="item-cname">
            <span v-html="item.asset_desc"></span>
          </el-col>
        </el-row>
      </template>
    </el-autocomplete>
    <ul class="clearfix hotword">
      <li v-for="item in recommends" :key="item.hotWordSn" @click="selectHot(item.hotWord)">
        <el-tooltip effect="dark" :content="item.hotWord" placement="top">
          <div>{{ item.hotWord }}</div>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
import market from '../utils/market'
import '../utils/marketFormatter'
export default {
  data() {
    return {
      keyword: '',
      classifyType: '',
      typeArray: [{ name: '基础标签', id: '1' }, { name: '标签专辑', id: '3' }],
      recommends: []
    }
  },
  watch: {
    classifyType(val) {
      if (this.$route.name === 'market-search') this.$emit('changeClassifyType', val)
    }
  },
  created() {
    this.getHotWord()
  },
  methods: {
    querySearch(queryString, cb) {
      if (!queryString) {
        cb([])
        return
      }
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/query'),
        method: 'get',
        params: this.$ajax.setParams({
          assetType: this.classifyType,
          from: 0,
          queryStr: queryString,
          schSrc: 1,
          size: 5,
          assetStatus: 1
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let content = data.data.contents
          if (data.data.users) content = content.concat(data.data.users)
          cb(content)
        } else {
          cb([])
        }
      })
    },
    getHotWord() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/hotWord'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.recommends = data.data
        } else {
          // 失败后执行的操作
        }
      })
    },
    selectHot(word) {
      this.keyword = word
      this.onSearch()
    },
    handleSelect(item) {
      if (Number(item.asset_type) === 3) {
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astAlbum/openPermission/${item.asset_id}`),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            if (data.data) {
              let routeName = market.typeToRoute(Number(item.asset_type))
              this.$blank(routeName, { params: { id: item.asset_id } })
            } else this.$message.error(`没有查看该专辑的权限`)
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      } else {
        if (!this.$auth('sch:astTag:view')) {
          this.$message.error(`没有查看标签的权限`)
          return
        }
        let routeName = market.typeToRoute(Number(item.asset_type))
        this.$blank(routeName, { params: { id: item.asset_id } })
      }
    },
    onSearch() {
      this.$refs.marketSearchBox.activated = false
      this.$emit('onSearch', { keyword: this.keyword, classifyType: this.classifyType })
    }
  }
}
</script>

<style lang="scss">
.market-search-box {
  ul {
    margin: 10px 0 0 0;
    padding-left: 120px;
    overflow: hidden;
    li {
      list-style-type: none;
      float: left;
      margin-left: 30px;
      color: #a7a6a6;
      cursor: pointer;
      &:first-child {
        margin-left: 0;
      }
    }
    &.hotword li {
      div {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:hover {
        color: $tag-red;
        font-weight: bold;
      }
    }
  }
  .el-autocomplete {
    width: 85%;
    .el-select .el-input {
      width: 120px;
      color: #fff;
      background-color: rgba(#31469f, 0.97);
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
    .el-input-group__append {
      font-size: 16px;
      color: #fff;
      background-color: rgba(#31469f, 0.97);
    }
    .el-input__icon {
      cursor: pointer;
    }
  }
}
</style>
